<template>
    <div :class="visible?'mod-on':'mod-off'" class="mod-card basic-shadow">
        <div class="relative-wrapper">
            <i class="el-icon-close upDraw-btn"
               style="z-index: 5"
               @click="closeModifier"></i>
        </div>
        <div class="QA-header" style="border: none">修改密码</div>
        <el-input
                ref="password0"
                v-model="password0"
                placeholder="原密码"
                name="password0"
                type="password0"
                prefix-icon="el-icon-key"
                show-password
        ></el-input>
        <el-input
                ref="password1"
                v-model="password1"
                placeholder="新密码"
                name="password1"
                type="password1"
                prefix-icon="el-icon-key"
                show-password
        ></el-input>
        <el-input
                ref="password2"
                v-model="password2"
                placeholder="确认新密码"
                name="password2"
                type="password2"
                prefix-icon="el-icon-key"
                show-password
        ></el-input>
        <div class="QA-tail right-button-group" style="border: none">
            <el-button class="right-button" icon="el-icon-check" size="small" @click="changePassword" type="primary"
                       plain round>
            </el-button>
            <el-button class="right-button" icon="el-icon-close" size="small" @click="closeModifier" type="danger"
                       plain round>
            </el-button>
        </div>
    </div>
</template>

<script>
    import {mapActions} from "vuex";

    export default {
        name: "keyModifier",
        data() {
            return {
                password0: "",
                password1: "",
                password2: "",
            };
        },
        props: {
            // 使用从父组件传来的属性值visible
            visible: {
                type: Boolean,
                default: true
            },
            userId: {
                type: Number,
                default: null
            }
        },
        methods: {
            ...mapActions([
                "updatePassword",
            ]),
            closeModifier() {
                this.$emit("close");
            },
            changePassword: function () {
                if (this.password1 !== this.password2) {
                    this.$message.error("两次密码输入不一致");
                }
                let data = {
                    id: this.userId,
                    oldPassword: this.password0,
                    newPassword: this.password1
                };
                this.updatePassword(data).then(res => {
                    if (res.code === 200) {
                        this.$message.success("修改密码成功");
                        this.$emit("logout");
                    }
                });
            },
        }
    };
</script>

<style scoped>
    @import "../../assets/styles/transition.css";
    @import "../../assets/styles/homePage.css";
    @import "../../assets/styles/QA.css";

    .mod-card {
        position: absolute;
        margin: 5px;
        padding: 10px;
        bottom: -216px;
        right: 0;

        height: 186px;
        width: 25%;
        border-radius: 5px;
        border: #eeeeee 1px solid;
        background-color: #f5f7fa;

        overflow: hidden;
    }

    .right-button-group {
        display: flex;
        vertical-align: middle;
        justify-content: flex-end;
    }

    .right-button {
        margin: 3px 15px 3px 0
    }

</style>